<template>
  <div class="public_page_style">
    <div class="public_top">
      <el-form v-model="queryParams" label-position="left">
        <el-row :gutter="20">
          <el-col :span="4">
            <el-form-item>
              <el-input v-model="queryParams.name" clearable placeholder="组织人员"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-input v-model="queryParams.content" clearable placeholder="活动内容"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-input v-model="queryParams.date" clearable placeholder="开始时间"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item>
              <el-select v-model="queryParams.flag" clearable placeholder="活动状态">
                <el-option label="未开始" value="1"/>
                <el-option label="已完成" value="2"/>
                <el-option label="已结束" value="3"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button type="primary" @click="getList">搜 索</el-button>
            <el-button @click="reset">重 置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="public_bottom">
      <el-table
          :data="tableData"
          :row-class-name="tableRowClassName"
          style="width: 100%">
        <el-table-column
            align="center"
            label="组织人"
            prop="name"
        />
        <el-table-column
            align="center"
            label="活动内容"
            prop="content"
        />
        <el-table-column
            align="center"
            label="开始时间"
            prop="date"
        />
        <el-table-column
            align="center"
            label="状态"
            prop="date"
        >
          <template slot-scope="{row}">
            <el-tag v-if="row.flag === '1'" type="info">未开始</el-tag>
            <el-tag v-if="row.flag === '2'" type="success">已完成</el-tag>
            <el-tag v-if="row.flag === '3'" type="danger">已结束</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: "AllActivities",
  data() {
    return {
      queryParams: {
        name: null,
        content: null,
        date: null,
        flag: null
      },
      tableData: [
        {
          date: '2016-05-02',
          name: '王小虎',
          content: '团队季度会议',
          flag: '1'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          content: '项目进度汇报',
          flag: '2'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          content: '新员工培训',
          flag: '3'
        }
      ]
    }
  },
  methods: {
    getList() {
      console.log(this.queryParams)
    },
    reset() {
      this.queryParams = {
        name: null,
        content: null,
        date: null,
        flag: null
      }
    },
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row'
      } else if (rowIndex === 3) {
        return 'success-row'
      }
      return ''
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
